<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f1f8f4;
            color: #2e7d32;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        .header-container {
            background-color: #388e3c;
            color: white;
            padding: 30px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .content {
            width: 90%;
            margin: 20px auto;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }

        .header {
            display: flex;
            background-color: #388e3c;
            color: #fff;
            padding: 15px;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .headerItem {
            flex: 1;
            text-align: center;
        }

        .coBodyItem {
            display: flex;
            padding: 15px 10px;
            border-bottom: 1px solid #e0e0e0;
            align-items: center;
            transition: background-color 0.3s ease;
        }

        .coBodyItem:hover {
            background-color: #f1f8f4;
        }

        .coBodyItem:last-child {
            border-bottom: none;
        }

        .item {
            flex: 1;
            text-align: center;
            word-break: break-word;
            font-size: 14px;
            color: #4caf50;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .btn.primary {
            background-color: #43a047;
            color: #fff;
            font-weight: bold;
        }

        .btn.primary:hover {
            background-color: #66bb6a;
            transform: scale(1.05);
        }

        .btn.danger {
            background-color: #d32f2f;
            color: #fff;
            font-weight: bold;
        }

        .btn.danger:hover {
            background-color: #e53935;
            transform: scale(1.05);
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .modal .modelBody {
            background: #ffffff;
            padding: 25px;
            border-radius: 12px;
            width: 400px;
            max-width: 90%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .modelBody h3 {
            color: #2e7d32;
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: bold;
        }

        .formItem {
            margin-bottom: 20px;
        }

        .formItem label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #388e3c;
        }

        .formItem input {
            width: calc(100% - 24px);
            max-width: 100%;
            padding: 12px;
            border: 1px solid #c8e6c9;
            border-radius: 6px;
            font-size: 14px;
            color: #2e7d32;
        }

        .formItem input:focus {
            outline: none;
            border-color: #66bb6a;
            box-shadow: 0 0 5px rgba(102, 187, 106, 0.5);
        }

        .btnBox {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .btn.primary {
            margin: 20px auto;
        }
    </style>
</head>

<body>
<div class="header-container">
    农产品溯源
</div>
    <div class="modal"  id="addProductModal">
        <div class="mask">

        </div>
        <div class="modelBody">
            <div>新增产品</div>
            <div class="formItem"><label>产品名:</label> <input id="productName" name="productName" aria-label="产品名" placeholder="产品名"></div>
            <div class="formItem"><label>产品简介：</label> <input id="productDesc" name="productDesc" aria-label="产品简介"  placeholder="产品简介"></div>
            <div class="formItem"><label>钱包地址:</label> <input id="address" name="address" aria-label="钱包地址"  placeholder="钱包地址"></div>
            <div class="formItem"><label>钱包私钥:</label> <input id="privateKey" name="privateKey" aria-label="钱包私钥 "  placeholder="钱包私钥"></div>
            <div class="btnBox"><button class="btn danger" onclick="closeProductModal()">取消</button><button class="btn primary" onclick="handleConfirm()">提交</button></div>
        </div>
    </div>

    <div class="modal"  id="addCodeModal">
        <div class="mask">
        </div>
        <div class="modelBody">
            <div>新增溯源码</div>
            <div class="formItem"><label>钱包私钥:</label> <input id="codePrivateKey" name="codePrivateKey" aria-label="钱包私钥 "  placeholder="钱包私钥"></div>
            <div class="btnBox"><button class="btn danger" onclick="closeCodeModal()">取消</button><button class="btn primary" onclick="addCode()">提交</button></div>
        </div>
    </div>

    <div class="modal"  id="jumpCodeModal">
        <div class="mask">
        </div>
        <div class="modelBody">
            <div>查看溯源码</div>
            <div class="formItem"><label>钱包私钥:</label> <input id="jumpCodePrivateKey" name="codePrivateKey" aria-label="钱包私钥 "  placeholder="钱包私钥"></div>
            <div class="btnBox"><button class="btn danger" onclick="closeJumpCodeModal()">取消</button><button class="btn primary" onclick="jumpCode()">查看</button></div>
        </div>
    </div>

    <button style="margin-left: 5%;margin-top: 40px" class="btn primary"  onclick="showProductModal()">新增产品</button>
    <div class="content">
        <div class="header">
            <div class="headerItem">id</div>
            <div class="headerItem">productName</div>
            <div class="headerItem">productDesc</div>
            <div class="headerItem">address</div>
            <div class="headerItem">createTime</div>
            <div class="headerItem">操作</div>
        </div>
        <div class="coBody">
        </div>
    </div>

</body>




<script>
    let productId

    function showCodeModal(id) {
        $('#addCodeModal').show()
        productId = id
    }

    function jumpCodeModal(id) {
        $('#jumpCodeModal').show()
        productId = id
    }

    function  init() {
        $.ajax({
            url: '/queryProducts', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            success: function(data) {
                // 在这里处理从服务器返回的数据
                const { o } = data
                let  html = ''
                o.forEach(item=> {
                    const str = `
                        <div class="coBodyItem">
                        <div class="item">${item.id}</div>
                        <div class="item">${item.productName}</div>
                        <div class="item">${item.productDesc}</div>
                        <div class="item">${item.address}</div>
                        <div class="item">${item.createTime}</div>
                        <div class="item"><button class="btn danger" onclick="showCodeModal(${item.id})">新增溯源码</button><button class="btn primary" onclick="jumpCodeModal(${item.id})">查看溯源码</button></div>
                    </div>`
                    html += str
                })

                $('.coBody').html(html)
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
            }
        });
    }
    function showProductModal() {
        $('#addProductModal').show()
    }
    let loading = false




    function handleConfirm() {
        if(loading) return
        loading = true
        const productName = $('#productName').val()
        const productDesc = $('#productDesc').val()
        const privateKey = $('#privateKey').val()
        const address = $('#address').val()
        $.ajax({
            url: '/product/add', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            contentType: 'application/json',
            data: JSON.stringify({
                productName,
                productDesc,
                privateKey,
                address
            }),
            success: function(data) {
                // 在这里处理从服务器返回的数据
                const { code, msg } = data
                if(code === '1') {
                    closeProductModal()
                    init()
                    alert('新增成功')
                } else  {
                    alert(msg)
                }
                loading = false
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
                loading = false
            }
        });
    }


    function closeProductModal() {
        $('#productName').val('')
        $('#productDesc').val('')
        $('#privateKey').val('')
        $('#address').val('')
        $('#addProductModal').hide()
    }




    let codeLoading = false
    function addCode () {
        if(codeLoading) return
        codeLoading = true
        const codePrivateKey = $('#codePrivateKey').val()
        $.ajax({
            url: '/createCode', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            contentType: 'application/json',
            data: JSON.stringify({
                id: productId,
                privateKey:codePrivateKey
            }),
            success: function (data) {
                // 在这里处理从服务器返回的数据
                const {code, msg} = data
                if (code === '1') {
                    closeCodeModal()
                    alert('新增成功')
                } else {
                    alert(msg)
                }
                codeLoading = false
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
                codeLoading = false
            }
        })
    }

    function  closeCodeModal() {
        $('#codePrivateKey').val('')
        $('#addCodeModal').hide()
    }
    function  closeJumpCodeModal() {
        $('#jumpCodePrivateKey').val('')
        $('#jumpCodeModal').hide()
    }
    function  jumpCode() {
        const privateKey = $('#jumpCodePrivateKey').val()
        window.location.href = `/code?id=${productId}&privateKey=${privateKey}`
    }

    init()

</script>

</html>